<template>
  <td>
    <span v-if="idx" class="idx">{{ idx + '.' }}</span>
    <template v-if="label">
      <span
        v-if="isSpecialTitle"
        class="title third-txt"
        :class="{ header }"
        :style="{ width: labelWidth }"
        v-html="titleArr"
      ></span>
      <label
        v-else
        class="text"
        :class="{ header }"
        :style="{ width: labelWidth }"
        >{{ label }}</label
      >
      <span>:</span>
    </template>
    <p>
      {{ value }}
      <span v-if="unit">{{ unit }}</span>
    </p>
  </td>
</template>
<script>
import { defineComponent, onMounted, reactive, toRefs } from 'vue'

export default defineComponent({
  name: 'Item',
  props: {
    label: {
      type: String,
      default: ''
    },
    value: {
      type: [String, Number],
      default: ''
    },
    header: Boolean, //是否是第一个
    labelWidth: {
      type: String,
      default: ''
    },
    unit: {
      type: String,
      default: ''
    },
    idx: {
      type: String,
      default: ''
    },
    isSpecialTitle: Boolean
  },
  setup(props) {
    const state = reactive({
      titleArr: ''
    })

    function initData() {
      const arr = props.label.split('')
      let title = ''
      arr.map(res => {
        title += `<span>${res}</span>`
      })
      state.titleArr = title
    }

    onMounted(() => {
      if (props.isSpecialTitle) {
        initData()
      }
    })

    return {
      ...toRefs(state)
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';

.container span.third-txt {
  min-width: 48px;
  display: flex;
  justify-content: space-between;
}
</style>
